<!doctype html>
<html lang="@locale@" data-framework="typescript">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
        #content {
            margin-bottom: 3rem !important;
            margin-top: 0.5rem !important;
        }

        svg {
            max-width: 100%;
        }

        .blocklyText {
            font-family:'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
        }

        .blocklyCheckbox,
        .blocklyLed {
            fill: #ff3030 !important;
            text-shadow: 0px 0px 6px #f00;
            font-size: 17pt !important;
        }

        .ui.card .blocklyPreview {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 1em);
            max-height: calc(100% - 1em);
        }

        
        div.blocks-svg-list > svg {
            margin-right: 1rem;
            margin-bottom: 1rem;
            page-break-inside: avoid;
            vertical-align: top;
        }

        code {
            white-space: pre-wrap;
        }
        code.lang-config, code.lang-package { display:none; }

        code.lang-block::before,
        code.lang-blocks::before,
        code.lang-blocksxml::before,
        code.lang-sig::before,
        code.lang-sim::before,
        code.lang-cards::before,
        code.lang-namespaces::before,
        code.lang-codecard::before,
        code.lang-shadow::before {
            content: "...";
            position: absolute;
            top: calc(50% - 0.5em);
            left: calc(50% - 5em);
        }

        code.lang-block,
        code.lang-blocks,
        code.lang-blocksxml,
        code.lang-sig,
        code.lang-sim,
        code.lang-cards,
        code.lang-namespaces,
        code.lang-codecard,
        code.lang-shadow {
            color: transparent;
        }
    </style>
    <link rel="stylesheet" data-rtl="/rtlsemantic.css" href="/semantic.css" type="text/css">
    <link id="blocklycss" rel="stylesheet" data-rtl="/rtlblockly.css" href="/blockly.css" type="text/css">
</head>

<body id="docs">
    <style type="text/css">
        @import "/highlight.js/styles/vs.css";
    </style>
    <div id="sidedocs-back-button" class="ui" style="display: none">
        <i class="ui icon left arrow"></i>
        <span id="back-label"></span>
    </div>
    <div id="sidedocs-back-button-divider" class="ui divider"></div>
    <div id='loading' class="ui active inverted dimmer">
        <div class="ui loader"></div>
    </div>
    <div id="content" class="ui container mainbody">
    </div>

    <script>
        // This line gets patched up by the cloud
        var pxtConfig = {
    "relprefix": "/",
    "verprefix": "",
    "workerjs": "/worker.js",
    "monacoworkerjs": "/monacoworker.js",
    "pxtVersion": "5.2.31",
    "pxtRelId": "",
    "pxtCdnUrl": "/",
    "commitCdnUrl": "/",
    "blobCdnUrl": "/",
    "cdnUrl": "/",
    "targetVersion": "0.0.0",
    "targetRelId": "",
    "targetUrl": "",
    "targetId": "maker",
    "simUrl": "/simulator.html",
    "partsUrl": "/siminstructions.html",
    "runUrl": "/run.html",
    "docsUrl": "/docs.html",
    "isStatic": true
};
    </script>
    <!-- @include apptrackingweb.html -->
    <!-- @include apptracking.html -->
    <script type="text/javascript" src="/jquery.js"></script>
    <script type="text/javascript" src="/embed.js"></script>
    <script type="text/javascript">
        (function () {
        var backButton = document.getElementById('sidedocs-back-button');
        // don't show 'go back' for printing
        if (/print:/.test(window.location.href)) {
            $(backButton).remove(); backButton = undefined;
            $('#sidedocs-back-button-divider').remove();
        }
        var loading = document.getElementById('loading');
        var content = document.getElementById('content');
        ksRunnerReady(function() {
            pxt.BrowserUtils.initTheme();
            pxt.docs.requireMarked = function() { return marked; }
            var backLabel = document.getElementById('back-label');
            if (backLabel)
                backLabel.textContent = pxt.Util.lf("Go back")
            var projectid = /projectid=([^&?]+)/i.exec(window.location.href);
            var project = /project=([^&?]+)/i.exec(window.location.href);
            var code = /code=([^&?]+)/i.exec(window.location.href);
            var md = /md=([^&?]+)/i.exec(window.location.href);
            var markdown = code ? "```blocks\n" + decodeURIComponent(code[1]) + "```" : md ? decodeURIComponent(md[1]) : undefined;
            var embed = /render=1/i.exec(window.location.href);
            if (markdown) {
                console.log('rendering code:')
                console.log(markdown);
                pxt.runner.renderMarkdownAsync(content, markdown).done(function() {
                    $(loading).hide();
                    $(content).show();
                });
            } else if (projectid) {
                pxt.runner.renderProjectAsync(content, projectid[1]).done(function() {
                    $(loading).hide();
                    $(content).show();
                });
            }
            else if (project) {
                const files = JSON.parse(project[1]);
                pxt.runner.renderProjectFilesAsync(content, files).done(function() {
                    $(loading).hide();
                    $(content).show();
                });
            }
            else if (embed)
                pxt.runner.startRenderServer();
            else
                pxt.runner.startDocsServer(loading, content, backButton);
        });
        })();
    </script>
</body>

</html>